<template>
  <view class="fanDetails_">
    <view class="fanDetails_wrapper">
      <view class="header_">
        <image class="img_1" v-if="order.avatar" :src="order.avatar"></image>
        <image class="img_2" v-if="!order.avatar" src="http://admin.ylnumber.cn/prod-api/file/test/productImage/20230719/3323e594988343059dad68103a5c7935.png"></image>
        <view class="right_">
          <view class="top_wrapper">
            <text>{{ order.nickName || "" }}</text>
            <view class="item_2">
              <image src="/static/user/4.png"></image>
              <view>
                {{
                  order.roleId === 1
                    ? "联创"
                    : order.roleId === 2
                    ? "合伙人"
                    : order.roleId === 3
                    ? "服务商"
                    : order.roleId === 4
                    ? "店主"
                    : order.roleId === 5
                    ? "普通用户"
                    : ""
                }}
              </view>
            </view>
            <!--            <view class="item_1">-->
            <!--              <view>普通用户</view>-->
            <!--            </view>-->
          </view>
          <view class="phone_wrapper">
            <view>
              <image src="/static/user/time.png"></image>
              <view>最近访问: {{ order.visitTime }}</view>
            </view>
            <view @click="freeTell">
              <image src="/static/user/phone.png"></image>
              <view>手机号: {{ order.phone || "无" }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="info_wrapper">
        <view class="item_info" v-for="(item, index) in infoList" :key="index">
          <view>
            <text>{{ item.num }}</text>
            <view>{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { selFansApi } from "@/api/fanManagement";

export default {
  name: "index.vue",
  data() {
    return {
      order: {},
      orderObj: {},
      infoList: [
        {
          num: 0,
          text: "消费订单(单)",
        },
        {
          num: 0,
          text: "消费总额(元)",
        },
        {
          num: 0,
          text: "产生佣金(元)",
        },
        // {
        //   num: 100,
        //   text: "关注(天)",
        // },
        // {
        //   num: 90,
        //   text: "活跃(天)",
        // },
        // {
        //   num: 10,
        //   text: "未登录(天)",
        // },
      ],
    };
  },
  onLoad(options) {
    console.log(options, "详情");
    this.order = JSON.parse(options.order);
    console.log(this.order, "数据");
  },
  onShow() {
    this.detailsFn();
  },
  methods: {
    async detailsFn() {
      const res = await selFansApi(this.order.userId);
      console.log(res, "粉丝详情");
      if (res.code === 0) {
        this.orderObj = res.data;
        //总金额 purchaseAmount
        const { orderNum, purchaseAmount, money } = res.data;
        this.infoList[0].num = orderNum||0;
        this.infoList[1].num = purchaseAmount||0;
        this.infoList[2].num = money||0;
      }
    },

    freeTell() {
      if (!this.order.phone) return;
      wx.makePhoneCall({
        phoneNumber: this.order.phone, //仅为示例，并非真实的电话号码
        success: function () {
          console.log("拨打电话成功！");
        },
        fail: function () {
          console.log("拨打电话失败！");
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.fanDetails_ {
  background: #ffffff;
  height: 100vh;
  > .fanDetails_wrapper {
    padding: rpx(16) rpx(12);
    > .header_ {
      display: flex;
      > image.img_1 {
        width: rpx(40);
        height: rpx(40);
        vertical-align: middle;
        border-radius: 50%;
        margin-right: rpx(4);
      }
      > .img_2 {
        width: rpx(40);
        height: rpx(40);
        vertical-align: middle;
        border-radius: 50%;
        margin-right: rpx(4);
        border: rpx(1) solid #cccccc;
      }
      > .right_ {
        > .top_wrapper {
          margin-bottom: rpx(6);
          display: flex;
          > text {
            margin-right: rpx(4);
            font-size: rpx(13);
            font-weight: bold;
            color: #353535;
          }
          > .item_1 {
            background: #f5f5f5;
            border-radius: rpx(9);
            font-size: rpx(11);
            font-weight: 400;
            color: #353535;
            padding: rpx(0) rpx(6);
            display: flex;
            align-items: center;
            justify-content: center;
          }
          > view.item_2 {
            background: #f1dcbb;
            border-radius: rpx(9);
            font-size: rpx(11);
            font-weight: 400;
            color: #353535;
            padding: rpx(0) rpx(6);
            display: flex;
            > image {
              width: rpx(29);
              height: rpx(18);
              vertical-align: middle;
              margin-left: rpx(-6);
              margin-right: rpx(2);
            }
            > view {
              display: flex;
              align-items: center;
            }
          }
        }
        > .phone_wrapper {
          view {
            display: flex;
            font-size: rpx(12);
            font-weight: 400;
            color: #353535;
            &:first-child {
              margin-bottom: rpx(8);
            }
            > image {
              width: rpx(16);
              height: rpx(16);
              margin-right: rpx(4);
            }
          }
        }
      }
    }
    > .info_wrapper {
      padding-top: rpx(24);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      > .item_info {
        width: 33%;
        height: rpx(87);
        background: #fafafa;
        border-radius: rpx(5);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: rpx(3);
        > view {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          > text {
            font-size: rpx(15);
            font-weight: bold;
            color: #353535;
          }
          > view {
            font-size: rpx(12);
            font-weight: 400;
            color: #b2b2b2;
          }
        }
      }
    }
  }
}
</style>
